/* src/pages/WritedSurveys.css */
.writed-surveys-container {
  padding: 24px;
}

.survey-link-input {
  max-width: 600px;
  margin-bottom: 32px;
}

.navigation-container {
  margin-bottom: 24px;
}

.navigation-card {
  width: 100%;
  margin-bottom: 16px;
}

.navigation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  background-color: #f0f2f5;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.navigation-title {
  margin: 0;
  font-weight: 500;
  color: #262626;
}

.navigation-content {
  padding: 12px;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-top: none;
  border-radius: 0 0 4px 4px;
  transition: all 0.3s ease;
}

.navigation-content h5 {
  margin-bottom: 8px;
  font-weight: 500;
  color: #595959;
}

.question-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.question-indicator {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  transition: all 0.3s;
  font-size: 12px;
  font-weight: 500;
}

.question-indicator:hover {
  transform: scale(1.1);
}

.question-indicator.answered {
  background-color: #52c41a;
  color: white;
  border-color: #52c41a;
}

.question-indicator.unanswered {
  background-color: #f0f0f0;
  color: #8c8c8c;
}

.question-item {
  margin-bottom: 24px;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .writed-surveys-container {
    background-color: #141414;
    color: #ffffff;
  }

  .navigation-card {
    background-color: #000000;
    color: #ffffff;
    border-radius: 4px;
  }

  .navigation-header {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #303030 !important;
  }

  .navigation-title {
    color: #ffffff !important;
  }

  .navigation-content {
    background-color: #000000 !important;
    border-color: #303030 !important;
    color: #ffffff !important;
  }

  .navigation-content h5 {
    color: #ffffff !important;
  }

  .question-indicator {
    border: 1px solid #434343;
    color: #d9d9d9;
    background-color: #262626;
  }

  .question-indicator:hover {
    border-color: #595959;
    background-color: #303030;
  }

  .question-indicator.unanswered {
    background-color: #262626;
    color: #8c8c8c;
    border-color: #434343;
  }

  .question-indicator.answered {
    background-color: #389e0d;
    color: #ffffff;
    border-color: #389e0d;
  }

  /* Ant Design组件适配 */
  .ant-typography {
    color: #ffffff !important;
  }

  .ant-form-item-label > label {
    color: #d9d9d9 !important;
  }
}

/* 强制深色模式样式 */
[data-theme="dark"] .writed-surveys-container,
.dark .writed-surveys-container,
body.dark .writed-surveys-container,
html.dark .writed-surveys-container {
  background-color: #141414;
  color: #ffffff;
}

[data-theme="dark"] .navigation-card,
.dark .navigation-card,
body.dark .navigation-card,
html.dark .navigation-card {
  background-color: #000000;
  color: #ffffff;
}

[data-theme="dark"] .navigation-header,
.dark .navigation-header,
body.dark .navigation-header,
html.dark .navigation-header {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #303030 !important;
}

[data-theme="dark"] .navigation-title,
.dark .navigation-title,
body.dark .navigation-title,
html.dark .navigation-title {
  color: #ffffff !important;
}

[data-theme="dark"] .navigation-content,
.dark .navigation-content,
body.dark .navigation-content,
html.dark .navigation-content {
  background-color: #000000 !important;
  border-color: #303030 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .navigation-content h5,
.dark .navigation-content h5,
body.dark .navigation-content h5,
html.dark .navigation-content h5 {
  color: #ffffff !important;
}

[data-theme="dark"] .question-indicator,
.dark .question-indicator,
body.dark .question-indicator,
html.dark .question-indicator {
  border: 1px solid #434343;
  color: #d9d9d9;
  background-color: #262626;
}

[data-theme="dark"] .question-indicator:hover,
.dark .question-indicator:hover,
body.dark .question-indicator:hover,
html.dark .question-indicator:hover {
  border-color: #595959;
  background-color: #303030;
}

[data-theme="dark"] .question-indicator.unanswered,
.dark .question-indicator.unanswered,
body.dark .question-indicator.unanswered,
html.dark .question-indicator.unanswered {
  background-color: #262626;
  color: #8c8c8c;
  border-color: #434343;
}

[data-theme="dark"] .question-indicator.answered,
.dark .question-indicator.answered,
body.dark .question-indicator.answered,
html.dark .question-indicator.answered {
  background-color: #389e0d;
  color: #ffffff;
  border-color: #389e0d;
}